import React, { Component, createRef } from 'react'
import { Swiper, Grid, Image, AutoCenter, InfiniteScroll, PullToRefresh } from 'antd-mobile'

import {UpOutline} from 'antd-mobile-icons'

import { getBannerList, getNavList, getProList } from '../../api/home'

import ProList from '../../components/ProList'

import './index.scss'

import Time from '../../components/Timer'
export default class Inedx extends Component {

  // 创建一个 ref 属性
  contentRef = createRef()

  // 创建响应式数据
  state = {
    bannerList: [],
    navList: getNavList(),
    proList: [],
    hasMore: true, // 是用来标记是否还有更多的数据
    count: 1, // 当前的页码
    scrollTop: 0 // 当前滚动距离
  }

  componentDidMount() {
    // 获取轮播图数据
    getBannerList().then(res => {
      // console.log(res);
      this.setState({
        bannerList: res.data
      })
    })

    // 获取商品数据
    // getProList().then(res => {
    //   this.setState({
    //     proList: res.data
    //   })
    // })

  }

  // 用户上拉加载的时候回调的函数
  loadMore = async ()=>{
    // 获取商品数据
    await getProList({count: this.state.count}).then(res => {
      if(res.data.length > 0){
        // 有数据
        this.setState({
          proList: [...this.state.proList, ...res.data],
          count: this.state.count + 1
        })
      }else {
        // 没有更多数据了
        this.setState({
          hasMore: false
        })
      }
      
    })
  }


  render() {

    // 定义一个用户下拉刷新的回调函数
    const refreshFn = () => {
      console.log('下拉了');

      // 获取商品数据
      getProList({count: 1}).then(res => {
        this.setState({
          proList: res.data,
          count: 2,
          hasMore: true
        })
      })
    }

    // 轮播图渲染
    const banner = this.state.bannerList.map(item => {
      return (
        <Swiper.Item key={item.bannerid}>
          <img style={{ height: 200, width: '100%' }} src={item.img} alt="" />
        </Swiper.Item>
      )
    })

    const nav = this.state.navList.map(item => {
      return (
        <Grid.Item key={item.navid}>
          <AutoCenter>
            <Image width={44} src={item.imgurl} />
            <div style={{textAlign: 'center'}}>{item.title}</div>
          </AutoCenter>
        </Grid.Item>
      )
    })

    return (
      <div className='box'>
        <header className='header'> 首页 </header>
        <div className='content' ref={this.contentRef} onScroll={(e)=>{
          // console.log(e.target.scrollTop);
          // 记录当前的滚动距离
          this.setState({
            scrollTop: e.target.scrollTop
          })
        }}>

          {/* 下拉刷新 */}
          <PullToRefresh 
            canReleaseText='你放试试,看我怎么刷新'
            onRefresh={refreshFn}
          >
            

          {/* 轮播图 */}
          {
            this.state.bannerList.length &&
            <Swiper
              style={{
                '--adm-color-primary': '#f66'
              }}
              autoplay
              loop
            >
              {banner}
            </Swiper>
          }

            

          {/* 宫格显示 */}
          <Grid style={{margin: '10px 0'}} columns={5} gap={15}>
            {nav}
          </Grid>

          {/* 秒杀 */}
          <Time />

          {/* 商品列表 */}
          <ProList proList={this.state.proList} />

          {/* 上拉加载更多 */}
          {/* hasMore 标记是否还有更多数据，loadMore 上拉之后的回调函数 */}
          <InfiniteScroll hasMore={this.state.hasMore} loadMore={this.loadMore} />

          {
            this.state.scrollTop >= 300 &&
            <UpOutline fontSize={26} className='goTop' onClick={()=>{
              // 修改滚动距离
              this.contentRef.current.scrollTop = 0
            }} />
          }
          </PullToRefresh>

        </div>
      </div>
    )
  }
}
